<template>
    <div class="main">
        <div class="tableBox">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                align='center'
                header-align='center'
                v-for="(item,index) in headerData"
                :key="index"
                :prop="item.prop"
                :label="item.label">
                </el-table-column>
                <el-table-column
                align='center'
                header-align='center'
                width='200'
                label="配送方式">
                <template slot-scope="scope">
                   <el-select size="small" v-model="value1" placeholder="请选择物流公司"
                   @change='selFn'>
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                </el-table-column>
                <el-table-column
                align='center'
                header-align='center'
                width='200'
                label="物流单号">
                <template slot-scope="scope">
                    <el-input
                        size="small"
                        v-model="value2"
                        @input="inpFn"
                        maxlength="12"
                        :show-word-limit="true"
                        clearable>
                    </el-input>
                </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="btnBox">
            <el-button @click="resetFn">取消</el-button>
            <el-button type="primary" @click="sumbitFn" :disabled='isSub'>确定</el-button>
        </div>
    </div>
</template>
<script>
import {orderobj,deliOrder} from "@/api/orderMock"
import {GetCookie} from "@/config/config"
export default {
    name:'delivery',
    data(){
        return{
            id:'',
            headerData:[
                {
                    label:'订单编号',
                    prop:'id'
                },
                {
                    label:'收货人',
                    prop:'username'
                },
                {
                    label:'手机号码',
                    prop:'tel'
                },
                {
                    label:'邮政编码',
                    prop:'zip'
                },
                {
                    label:'收货地址',
                    prop:'address'
                },
            ],
            tableData:[],
            options:[
                {
                   label:'顺丰快递',
                   value:1 
                },
                {
                   label:'百世快递',
                   value:2
                },
                {
                   label:'圆通快递',
                   value:3 
                },
                {
                   label:'中通快递',
                   value:4 
                },
                {
                   label:'韵达快递',
                   value:5 
                },
            ],
            value1:'',
            value2:'',
            isSub:true,
        }
    },
    mounted(){
        let _self = this;
        _self.id = GetCookie("id");
        _self.searchList()
    },
    coponents:{},
    methods:{
        searchList(){
            let _self = this;
             let data = {id:_self.id};
             console.log(data);
            orderobj(data).then(res=>{
                if(res.meta.status==200){
                    let item = res.data.user[0]
                    if(item){
                        _self.tableData.push({
                            id:item.id,
                            username:item.userChlidren[0].username,
                            tel:item.userChlidren[0].tel,
                            zip:item.userChlidren[0].zip,
                            address:item.userChlidren[0].address,
                            logistics:'',
                            singleNum:''
                        })
                    }
                }
            })
        },
        resetFn(){
            let _self = this;
            _self.$router.go(-1)
        },
        sumbitFn(){
            let _self = this;
            let data = {
                id:_self.id,
                logistics:_self.value1,
                singleNum:_self.value2
            }
            deliOrder(data).then(res=>{
                if(res.meta.status==200){
                    _self.$message({
                        message: '发货成功',
                        type: 'success'
                    });
                    _self.$router.go(-1)
                }
            })
        },
        keyFn(){
            let _self = this;
            if(_self.value2.length>=12 && _self.value1){
                _self.isSub = false
            }else{
                _self.isSub = true
            }
        },
        selFn(){
            let _self = this;
            _self.keyFn()
        },
        inpFn(){
            let _self = this;
            _self.keyFn()
        }
    },
    watch: {
        value2(val){
            // 纯数字，不含小数点
            this.value2 = val.replace(/\D/g, '');
        }
    },
}
</script>
<style scoped>
.tableBox{
    margin-top: 100px;
    margin-bottom: px;
}
.main{
    position: relative;
}
.btnBox{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
</style>